<script lang="ts" setup>
import { getAdminRouter } from '@/router'
import { RouteNameEnum } from '@/enum'

const router = useRouter()
const route = useRoute()

const list = getAdminRouter()
</script>

<template>
  <el-menu
    :default-active="route.fullPath"
    class="use-theme use-transitions-colors size-full"
    router
    unique-opened
  >
    <span class="flex pb-5 pt-10 pl-5 flowing-text">
      <a class="text-3xl" @click="router.push({ name: RouteNameEnum.ADMIN_HOME })">UTOPIA</a>
    </span>
    <div v-for="(p, i) in list" :key="i" class="!w-full">
      <template v-if="!p.children || p.children.length == 0">
        <a
          :href="p.meta?.isFrame ? p.path : 'javascript:'"
          class="flex my-2"
          target="_blank"
          @click="p.components ? router.push({ name: p.meta?.name?.toString() }) : ''"
        >
          <SvgIcon
            :message="p.meta?.title?.toString()"
            :name="p.meta?.icon?.toString()"
            parent-class="py-1.5 use-font-theme use-transitions-colors-short px-5 size-full"
          />
        </a>
      </template>
      <template v-else>
        <el-sub-menu :index="p.meta?.name?.toString() || ''">
          <template #title>
            <SvgIcon
              :message="p.meta?.title?.toString()"
              :name="p.meta?.icon?.toString()"
              parent-class="py-1.5 use-font-theme use-transitions-colors-short px-5 size-full"
            />
          </template>
          <el-menu-item v-for="(c, j) in p.children" :key="j">
            <a
              :href="c.meta?.isFrame ? c.path : 'javascript:'"
              class="size-full"
              target="_blank"
              @click="c.components ? router.push({ name: c.meta?.name?.toString() }) : ''"
            >
              <SvgIcon
                :message="c.meta?.title?.toString()"
                :name="c.meta?.icon?.toString()"
                parent-class="py-1.5 use-font-theme use-transitions-colors-short pl-10 size-full"
              />
            </a>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </div>
  </el-menu>
</template>

<style lang="scss">
.el-sub-menu__title,
.el-menu-item {
  padding: 0 !important;

  &:hover {
    @extend .use-hover-bg !optional;
  }

  @extend .use-transitions-colors-short !optional;
  background-color: transparent;
}

.el-menu--inline {
  @extend .use-theme !optional;
  @extend .use-transitions-size !optional;
}
</style>
